
<template>

  <div style="height:100%;width:100%;position:relative;">
      <el-dialog v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="报告项目" :visible.sync="dialogRptVisible" v-if="dialogRptVisible">
          <rm-pop-rptitem prgno="SMP111" :rptunitid="''" :rptunitdisabled="false" :germmode="''" @selitem="addrptitem" @cancel="dialogRptVisible = false,$refs.xTable.setActiveCell($refs.xTable.getCurrentRow(), 'rptitemshow')" ref="rptdialog"></rm-pop-rptitem>
      </el-dialog>
      <div class="pagetop">
          <div class="search-title">快速查询</div>
          <el-input v-model.trim="txtSearch" @input="btnQuery" placeholder="报告项目代码|名称|英文缩写" style="width:200px" :disabled="changeFlag"></el-input>
          <div class="search-title">样本库</div>
          <el-select v-model="selCodeno" filterable style="width:150px" @change="btnQuery"  ref="refSelCodeno" :disabled="changeFlag">
              <el-option v-for="(item, index) in selSmpLibrary_Options" :key="index" :value="item.librid" :label="item.librname"></el-option>
          </el-select>
          <div class="top-deal">
              <el-button @click="btnQuery" icon="el-icon-search" v-has="'PINQUERY'" type="primary">查询</el-button>

              <el-button icon="el-icon-plus" v-has="'PADD'" @click.native="btnAdd()" :disabled="changeFlag">新增</el-button>

              <el-button icon="el-icon-delete" v-has="'PDELETE'" @click.native="btnDel()" :disabled="changeFlag">删除</el-button>

              <el-button icon="el-icon-document" v-has="'PMODIFY'" @click.native="btnSave()" :disabled="!changeFlag">保存</el-button>

              <el-button icon="el-icon-document" v-has="'PMODIFY'" @click.native="btnCancel()" :disabled="!changeFlag">取消</el-button>
          </div>

      </div>
      <div class="pagecenter">
          <rm-layout-right splitcolor="#FFFFFF" movingcolor="#CCFFFF" :splitwidth=5 :fixsize=400><template v-slot:fix>
                  <div style="width:100%;float:left;height:100%;border:1px solid #ccc;overflow:auto;" id="showbox">
                      <el-form :inline="true" @submit.native.prevent label-width="auto" ref="form_bbjlx" :model="detailData">
                          <table style="width:100%;font-size:12px;white-space: nowrap; padding-top:3px;text-align: left; align:;center;padding:0px 5px 5px 0px">
                              <tr>
                                  <td style="text-align: right; ">样本库ID</td>
                                  <td colspan="3">
                                      <el-select v-model="detailData.librid" filterable style="width:250px" @change="IsChange" :disabled="true">
                                          <el-option v-for="(item,index) in selSmpLibrary_Options" :key="index" :value="item.librid" :label="item.librname"></el-option>
                                      </el-select>
                                  </td>
                              </tr>
                              <tr>
                                  <td style="text-align: right; ">关注LIS项目ID</td>
                                  <td colspan="3">
                                      <el-input style="width:250px;" v-model="detailData.listitemid" @input="IsChange" :disabled="disabledNo"></el-input>
                                  </td>
                              </tr>
                              <tr>
                                  <td style="color:#F56C6C;text-align: right; ">报告项目代码</td>
                                  <td colspan="3">
                                      <el-input style="width:250px;" v-model="detailData.rpt_itemcode" @input="IsChange" ref="input1" @dblclick.native="dialogRptVisible=true,tempRptItem=row,$nextTick(() => {$refs.rptdialog.$refs.qcodeinput.focus();});" @keyup.enter.native="NextFocus(1)"></el-input>
                                  </td>
                              </tr>
                              <tr>
                                  <td style="text-align: right; ">项目名称</td>
                                  <td colspan="3">
                                      <el-input style="width:250px;" v-model="detailData.rpt_itemname" @input="IsChange" ref="input2"  @keyup.enter.native="NextFocus(2)"></el-input>
                                  </td>
                              </tr>
                              <tr>
                                  <td style="color:#F56C6C;text-align: right; ">英文缩写</td>
                                  <td colspan="3">
                                      <el-input style="width:250px;" v-model="detailData.itemcode_en" @input="IsChange" ref="input3"  @keyup.enter.native="NextFocus(3)"></el-input>
                                  </td>
                              </tr>
                              <tr>
                                  <td style="text-align: right; ">序号</td>
                                  <td colspan="3">
                                      <el-input style="width:250px;" v-model="detailData.seq" @input="IsChange" ref="input4" @keyup.enter.native="NextFocus(4)"></el-input>
                                  </td>
                              </tr>
                          </table>
                      </el-form>
                  </div>
              </template>
              <vxe-table :loading="loading" :data.sync="leftTableData" border fit height="auto" header-align="center" highlight-current-row highlight-hover-row ref="xTable" resizable show-header-overflow="tooltip" show-overflow="tooltip" size="mini" stripe @current-change="CurrentChange" :cell-class-name="CellClassName" :row-class-name="RowClassName">
                  <vxe-table-column field="librname" title="样本库" width="80" align="center"></vxe-table-column>
                  <vxe-table-column field="listitemid" title="关注LIS项目ID" width="100"></vxe-table-column>
                  <vxe-table-column field="rpt_itemcode" title="报告项目代码" width="150"></vxe-table-column>
                  <vxe-table-column field="rpt_itemname" title="报告项目名称" width="150"></vxe-table-column>
                  <vxe-table-column field="itemcode_en" title="英文缩写" width="100"></vxe-table-column>
                  <vxe-table-column field="seq" title="序号" width="60"></vxe-table-column>
              </vxe-table>
          </rm-layout-right>
      </div>
      <el-dialog v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="提示" :visible.sync="bDelVisible" width="500px" height="300px">
          <span class="el-icon-info">确定删除<b>关注LIS项目ID:</b><b style="color:red">{{detailData.listitemid}} </b><b>报告项目:</b><b style="color:red">{{detailData.rpt_itemname}}({{detailData.rpt_itemcode}})</b>的记录吗？</span>
          <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="btnDelComfirm">确 定</el-button>
              <el-button @click="btnDelCancel" :autofocus="true">取 消</el-button>
          </span>
      </el-dialog>
  </div>
</template>

<script type="text/javascript">
import { Promise } from "q"
import { invalid } from "moment"
import md5 from "js-md5"
import XEUtils from "xe-utils"
export default {
  name: "SMP111",
  data() {
      return {
          loading: false,
          changeFlag: false,
          ifCanEditFlag: false,
          okFirstLoading: true,
          disabledNo: true,
          bDelVisible: false,
          selflag: 1,
          txtSearch: "", //查询内容（对 样本库代码、名称进行模糊查询）
          selCodeno: "", //样本库类型代码
          selCodena: "", //样本库类型名称
          listitemid: "",
          librid: "", //样本库ID
          actionindex: "M", //M默认 A新增 E修改 D删除
          detailData: {
              listitemid: null,
              librid: null,
              librname: "", //增加的样本库ID名称列
              rpt_itemcode: "",
              rpt_itemname: "",
              itemcode_en: "",
              seq: null,
          },
          oldDetailData: {
              listitemid: null,
              librid: null,
              librname: "",
              rpt_itemcode: "",
              rpt_itemname: "",
              itemcode_en: "",
              seq: null,
          },
          selRow: {
              listitemid: null,
              librid: null,
              librname: "",
              rpt_itemcode: "",
              rpt_itemname: "",
              itemcode_en: "",
              seq: null,
          },
          leftTableData: [],
          addData: [],
          modData: [],
          selSmpLibrary_Options: [], //样本库类型

          dialogRptVisible: false,  //报告项目弹窗
      }
  },
  watch: {},
  created() {
      this.ddlSmp_Library() //初始化样本类型
      this.$nextTick(() => {
          this.btnQuery() //初始化主列表
      })
  },
  mounted() {},
  updated() {
      if (this.okFirstLoading) {
          let currentrow = this.$refs.xTable.getData(0)
          this.$nextTick(() => {
              if (currentrow) {
                  this.okFirstLoading = false
                  this.$refs.xTable.setCurrentRow(currentrow)
              }
              else{
                  this.listitemid == ""
              }
          })
      }
  },
  methods: {
      /*-----------------------------初始化-----------------------------*/
      //获取样本库列表
      ddlSmp_Library() {
          this.$tool
              .request({
                  url: "SMP/SMP1/SMP130",
                  method: "post",
                  data: {
                      action: "q_smp_library",
                  },
              })
              .then((res) => {
                  this.selSmpLibrary_Options = res
                  if(this.selSmpLibrary_Options.length > 0)
                  {
                      this.selCodeno = this.selSmpLibrary_Options[0].librid
                  }
              })
      },
      /*-----------------------------行改变-----------------------------*/
      CurrentChange({ row, rowIndex }, event) {
          if (this.selflag == "1") {
              this.$nextTick(async () => {
                  await this.CurrentChangeEvent(row, rowIndex)
              })
          } else {
              this.$refs.xTable.setCurrentRow(this.selRow)
              return
          }
      },
      async CurrentChangeEvent(row, rowIndex) {
          this.listitemid = row.listitemid
          this.selflag = "0"
          this.CurrentSave()
              .then(() => {
                  this.selRow = row
                  this.listitemid = row.listitemid
                  this.$refs.xTable.setCurrentRow(row)
                  this.$nextTick(async () => {
                      await this.DetailQuery()
                      this.selflag = "1"
                  })
              })
              .catch((ex) => {
                  this.$refs.xTable.setCurrentRow(this.selRow)
                  this.selflag = "1"
              })
      },
      CurrentSave() {
          return new Promise((s, f) => {
              let haschange = false
              let saveinfo = XEUtils.clone(this.detailData, true)
              if (this.actionindex == "M") {
                  //如果是修改
                  if (!XEUtils.isEqualWith(this.oldDetailData, saveinfo)) {
                      //表单被更改
                      haschange = true
                  }
              } else if (this.actionindex == "A") {
                  //如果是新增
                  haschange = true
              }
              if (saveinfo.rpt_itemcode == "") {
                  this.$alert("报告项目代码不可为空", "提示",                    { type: "warning" }, {
                      confirmButtonText: "确定",
                  })
                  this.$refs.input1.focus()
                  f()
                  return
              }
              if (saveinfo.itemcode_en == "") {
                  this.$alert("英文缩写不可为空", "提示",                     { type: "warning" },{
                      confirmButtonText: "确定",
                  })
                  this.$refs.input3.focus()
                  f()
                  return
              }
              if (haschange) {
                  this.$nextTick(async () => {
                      const res = await this.$tool.request({
                          url: "SMP/SMP1/SMP111",
                          method: "post",
                          data: {
                              action: "smp_lisitem_addedit",
                              data: saveinfo,
                          },
                      })
                      if (res.errcode == "1") {
                          this.$message({
                              message: "保存成功！",
                              type: "success",
                              showClose:true,
                          })
                          this.listitemid = res.keyid
                          this.changeFlag = false
                          this.disabledNo = true
                          //不是删除操作
                          if (this.actionindex == "A") {
                              saveinfo.listitemid = this.listitemid
                              this.detailData.listitemid = this.listitemid
                              this.selSmpLibrary_Options.forEach((item) => {
                                  if (saveinfo.librid == item.librid) {
                                      saveinfo.librname = item.librname
                                  }
                              })
                              //新增数据成功后的不刷新操作
                              this.$refs.xTable
                                  .insertAt(saveinfo, -1)
                                  .then(({ row }) => {
                                      this.$refs.xTable.setCurrentRow(row)
                                      this.selRow = row
                                  })
                              if (this.addData.indexOf(this.listitemid) < 0) {
                                  this.addData.push(this.listitemid)
                              }
                          } else if (this.actionindex == "M") {
                              this.SetValueToTable(saveinfo)
                              if (this.modData.indexOf(this.listitemid) < 0) {
                                  this.modData.push(this.listitemid)
                              }
                          }
                          this.actionindex = "M"
                          s()
                      } else {
                              this.$message({
                                  message: "保存失败！" + res.obj,
                                  type: "error",
                                  showClose:true,
                              })
                          f()
                      }
                  })
              } else {
                  this.changeFlag = false
                  s()
              }
          })
      },
      /*-----------------------------按钮类-----------------------------*/
      async btnQuery() {
          this.loading = true
          this.actionindex="M"
          this.addData = []
          this.modData = []
          try {
              const res = await this.$tool.request({
                  url: "SMP/SMP1/SMP111",
                  method: "post",
                  data: {
                      action: "smp_lisitem_query",
                      keystr: this.txtSearch,
                      librid: this.selCodeno,
                  },
              })
              this.leftTableData = res.RData.Data
              this.leftTableData.forEach((item) => {
                  this.selSmpLibrary_Options.forEach((item2) => {
                      if (item.librid == item2.librid) {
                          item.librname = item2.librname
                      }
                  })
              })

              this.okFirstLoading = true
              this.selRow = null
              if (res.RData.Data.length > 0) {
                  this.selRow = res.RData.Data[0]
                  this.listitemid = res.RData.Data[0].listitemid
                  this.librid = res.RData.Data[0].librid
              } else {
                  this.listitemid = ""
                  this.librid = ""
                  this.detailData = {}
              }
              this.loading = false
              if (this.listitemid != "" && this.librid != "") {
                  await this.DetailQuery()
              }
              this.changeFlag = false
              this.disabledNo = true
          } catch (e) {
              this.loading = false
              this.$message({
                  message: e.message,
                  type: "error",
                  showClose:true,
              })
          }
      },
      async DetailQuery() {
          try {
              const res = await this.$tool.request({
                  url: "SMP/SMP1/SMP111",
                  method: "post",
                  data: {
                      action: "smp_lisitem_query_byid",
                      listitemid: this.listitemid,
                      librid: this.librid,
                  },
              })
              this.detailData = res.Data[0]
              //换行保存储备数据
              this.oldDetailData = XEUtils.clone(this.detailData, true)
          } catch (e) {
              this.$message({
                  message: e.message,
                  type: "error",
                  showClose:true,
              })
          }
      },
      btnAdd() {
          if (this.selCodeno != "") {
              this.changeFlag = true
              this.actionindex = "A"
              this.detailData = {
                  librid: this.selCodeno,
                  listitemid: null,
                  rpt_itemcode: "",
                  itemcode_en: "",
                  description: "",
                  seq: null,
              }
              this.$nextTick(() => {
                  this.$refs.input1.focus()
              })
          } else {
              this.$message({
                  message: "请您先选择对应的样本库。",
                  type: "warning",
                  showClose:true,
              })
              this.$nextTick(() => {
                  this.$refs.refSelCodeno.focus()
                  return false
              })
          }
      },
      btnDel() {
          if (this.listitemid == "") {
              this.$message({
                  message:"请先选择一条数据。",
                  type: "warning",
                  showClose:true,
              })
              return false
          }
          if (this.selCodeno == "") {
              this.$message({
                  message: "请先选择所属的样本库。",
                  type: "warning",
                  showClose:true,
              })
              return false
          }

          this.bDelVisible = true
      },
      btnDelCancel() {
          this.bDelVisible = false
          this.$message({
              type: "info",
              message: "已取消删除",
              showClose:true,
          })
      },
      btnDelComfirm() {
          this.bDelVisible = false
          let that = this
          this.$tool
              .request({
                  url: "SMP/SMP1/SMP111",
                  method: "post",
                  data: {
                      action: "smp_lisitem_delete",
                      listitemid: this.listitemid,
                      librid: this.detailData.librid,
                  },
              })
              .then((res) => {
                  if (res == "1") {
                      this.detailData = {};
                      this.$message({
                          message: "删除成功！",
                          type: "success",
                          showClose:true,
                      })
                      this.actionindex = "M"
                      //是删除操作
                      var delrow = that.$refs.xTable.getCurrentRow()

                      if (delrow) {
                          var alld = that.$refs.xTable.getTableData().fullData
                          var rowindex = alld.indexOf(delrow)
                          that.$refs.xTable.remove(delrow)
                          setTimeout(async () => {
                              let havedata = that.$refs.xTable.tableData
                              if (havedata.length > 0) {
                                  if (rowindex >= havedata.length)
                                      rowindex = havedata.length - 1
                                  let selectrow = havedata[rowindex]
                                  that.$refs.xTable.setCurrentRow(selectrow)
                                  that.listitemid = selectrow.listitemid
                                  await this.DetailQuery()
                                  that.$refs.xTable.scrollToRow(selectrow)
                              }
                          }, 5)
                      }
                      this.ifCanEditFlag = false
                  } else {
                          this.$message({
                              message: "删除失败！" + res.errmsg,
                              type: "error",
                              showClose:true,
                      })
                  }
              })
              .catch((e) => {
                  this.$message({
                      message: e,
                      type: "error",
                      showClose:true,
                  })
              })
      },
      btnSave() {
          let that = this
          let gData = XEUtils.clone(that.detailData, true)
          if (this.actionindex == "M") {
              //无数据时
              if (this.listitemid == "") {
                  this.$alert("请您通过新增按钮来添加数据", "提示",                    { type: "warning" }, {
                      confirmButtonText: "确定",
                  })
                  this.btnCancel()
                  return
              }
              if (this.selCodeno == "") {
                  this.$alert("请先选择对应的样本库。", "提示",                    { type: "warning" }, {
                      confirmButtonText: "确定",
                  })
                  this.$nextTick(() => {
                      this.$refs.refSelCodeno.focus()
                  })
                  this.btnCancel()
                  return
              }
          }
          if (gData.rpt_itemcode == "") {
              this.$alert("报告项目代码不可为空！", "提示",                     { type: "warning" },{
                  confirmButtonText: "确定",
              })
              this.$refs.input1.focus()
              return
          }
          if (gData.itemcode_en == "") {
              this.$alert("英文缩写不可为空！", "提示",                     { type: "warning" },{
                  confirmButtonText: "确定",
              })
              this.$refs.input3.focus()
              return
          }
          if (gData.listitemid == "") {
              gData.listitemid = 0
          } else {
              gData.listitemid = parseInt(gData.listitemid, 10)
          }
          if (gData.seq == "") {
              gData.seq = 0
          }
          this.$tool
              .request({
                  url: "SMP/SMP1/SMP111",
                  method: "post",
                  data: {
                      action: "smp_lisitem_addedit",
                      data: gData,
                  },
              })
              .then((res) => {
                  if (res.errcode == "1") {
                      that.$message({
                          message: "保存成功！",
                          type: "success",
                          showClose:true,
                      })
                      this.listitemid = res.keyid
                      this.changeFlag = false
                      //不是删除操作
                      console.log("lim", this.listitemid)
                      if (this.actionindex == "A") {
                          console.log("gData1", gData)
                          gData.listitemid = this.listitemid
                          this.selSmpLibrary_Options.forEach((item) => {
                              if (gData.librid == item.librid) {
                                  gData.librname = item.librname
                              }
                          })
                          this.detailData.listitemid = this.listitemid
                          this.$refs.xTable
                              .insertAt(gData, -1)
                              .then(({ row }) => {
                                  this.$refs.xTable.setCurrentRow(row)
                                  this.selRow = row
                              })
                          if (this.addData.indexOf(this.listitemid) < 0) {
                              this.addData.push(this.listitemid)
                          }
                      } else if (this.actionindex == "M") {
                          this.SetValueToTable(gData)
                          if (this.modData.indexOf(this.listitemid) < 0) {
                              this.modData.push(this.listitemid)
                          }
                          var mrow = this.$refs.xTable.getCurrentRow()
                          this.$refs.xTable.setCurrentRow(mrow)
                      }
                      this.selRow = this.$refs.xTable.getCurrentRow()
                      this.actionindex = "M"
                      setTimeout(async () => {
                          if (this.selRow) {
                              await this.DetailQuery() //查后台记录当前的值方便比较保存后值是否发生改变
                              this.$refs.xTable.setCurrentRow(this.selRow)
                              this.$refs.xTable.scrollToRow(this.selRow)
                          }
                      }, 5)
                  } else {
                      this.actionindex = that.actionindex
                      this.$message({
                          message: "保存失败！" + res.obj,
                          type: "error",
                          showClose:true,
                      })
                  }
              })
              .catch((e) => {
                  this.$message({
                      message: e,
                      type: "error",
                      showClose:true,
                  })
              })
      },
      async btnCancel() {
          this.actionindex = "M"
          this.changeFlag = false
          let row = this.$refs.xTable.getCurrentRow()
          if(row){
              this.listitemid = row.listitemid
          }
          await this.btnQuery()
      },
      btnPrint() {},
      btnExport() {},
      /*-------------------------------其它-------------------------------*/
      IsChange() {
          this.changeFlag = true
      },
      NextFocus(index) {
          if (index > 4) return false
          var that = this
          var focusIndex = index + 1
          setTimeout(function () {
              that.$refs["input" + focusIndex].focus()
              if (index == 4) {
                  that.btnSave()
              }
          }, 1)
      },
      async SetValueToTable(obj) {
          this.$nextTick(() => {
              this.selRow.listitemid = obj.listitemid
              this.selRow.librid = obj.librid
              this.selRow.rpt_itemcode = obj.rpt_itemcode
              this.selRow.rpt_itemname = obj.rpt_itemname
              this.selRow.itemcode_en = obj.itemcode_en
              this.selRow.seq = obj.seq
          })
      },
      /*------------------------------Class------------------------------*/
      CellClassName({ columnIndex, row }) {
          if (columnIndex == "0" || columnIndex == "1") {
              if (row.flag == "1") {
                  //不能再次选择
                  return "col-orange"
              } else {
                  //新增的数据
                  return ""
              }
          } else {
              return ""
          }
      },
      RowClassName({ row, rowIndex }) {
          if (this.addData.indexOf(row.listitemid) > -1) {
              return "row-new"
          }
          if (this.modData.indexOf(row.listitemid) > -1) {
              return "row-modify"
          }
      },
      //rm-pop-rptitem弹窗 双击行或确定事件
      addrptitem(c, n, row) {
          console.log("我是C:",c);
          console.log("我是N:",n);
          console.log("我是ROW:",row);

          //报告项目代码
          this.detailData.rpt_itemcode = c;
          //项目名称
          this.detailData.rpt_itemname = n;
          //英文缩写
          this.detailData.itemcode_en = row.itemcode_en;
          //隐藏rm-pop-rptitem弹窗
          this.dialogRptVisible = false;
      },
  },
}
</script>

<style scoped>
.pagetop {
  width: 100%;
  height: 35px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  font-size: 12px;
  z-index: 99;
  overflow-x: auto;
  white-space: nowrap;
}
.top-deal {
  right: 5px;
  position: absolute;
  top: 5px;
  display: flex;
  align-items: center;
}
.search-title {
  margin: 0 5px 0 20px;
  font-size: 12px;
}
.pagecenter {
  position: absolute;
  top: 40px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}
table {
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 5px;
}
::v-deep .el-input.is-disabled .el-input__inner {
  color: #606266;
  cursor: not-allowed;
}
::v-deep  .vxe-table .vxe-body--column.col-orange {
  background-color: #f8f8f8;
}
::v-deep .el-input--suffix .el-input__inner {
  padding-right: 5px;
}
::v-deep  tr.vxe-body--row.row-new {
  color: #cc6600;
}
::v-deep  tr.vxe-body--row.row-modify {
  color: blue !important;
}
::v-deep  tr.vxe-body--row.row--current {
  color: #000000;
  font-weight: bold;
}
</style>
